//# 搜索栏组件
import React from 'react';

const SearchBar = ({
    searchTerm,
    setSearchTerm,
    statusFilter,
    setStatusFilter,
    selectedCount,
    onDeleteSelected
}) => {
    return (
        <div className="bg-white rounded-lg shadow-sm p-4 flex flex-col md:flex-row md:items-center gap-4">
            {/* 搜索框 */}
            <div className="relative flex-grow">
                <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                    <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </span>
                <input
                    type="text"
                    placeholder="搜索评论内容、姓名或邮箱..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
                />
            </div>

            {/* 状态筛选 */}
            <div className="flex-grow md:flex-grow-0">
                <select
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                    className="w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
                >
                    <option value="all">所有状态</option>
                    <option value="approved">已通过</option>
                    <option value="pending">待审核</option>
                    <option value="rejected">已拒绝</option>
                </select>
            </div>

            {/* 删除选中按钮 */}
            <button
                onClick={onDeleteSelected}
                disabled={selectedCount === 0}
                className="w-full md:w-auto px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
                <span>删除选中 ({selectedCount})</span>
            </button>
        </div>
    );
};

export default SearchBar;  